
//定义一组数据
const 原始数组 = [ 'A', 'B', 'C', 'D']

const 暂存数组 = []

let 开始索引 ;

const 外层容器 = document.getElementById('root')

将数据渲染到容器中()

function 将数据渲染到容器中(){
    [...原始数组]
        .map(字母 => ({value: 字母, sort: Math.random()}))
        .sort((a, b) => a.sort - b.sort)
        .forEach((字母对象, 索引) =>{
            const 每一项 = document.createElement('li')
            每一项.setAttribute('data-index',索引)
            每一项.innerHTML = `
                <span class='number'>${索引+1}</span>
                <div class='draggable' draggable='true'>${字母对象.value}</div>
            `
            暂存数组.push(每一项)
            外层容器.appendChild(每一项)
        })

        开始监听()
}

function 交换位置(从, 到){
    const 开始元素 = 暂存数组[从].querySelector('.draggable')
    const 结束元素 = 暂存数组[到].querySelector('.draggable')

    暂存数组[从].appendChild(结束元素)
    暂存数组[到].appendChild(开始元素)

}


function 开始拖动(){
    // console.log('开始拖动');
    开始索引 =  this.closest('li').getAttribute('data-index')
    // console.log(开始索引,'开始');
}

function 经过元素(e){
    // console.log('经过元素');
    // this.classList.add('over')
    e.preventDefault()
}

function 放下元素(){
    // console.log('放下元素');
    let 结束索引 = this.getAttribute('data-index')
    // console.log(结束索引, '结束');
    交换位置(开始索引, 结束索引)

}

function 进入元素(){
    // console.log('进入元素');
}

function 离开元素(){
    // console.log('离开元素');
    this.classList.remove('over')
}

function 开始监听(){
    const draggables = document.querySelectorAll('.draggable')
    const dragListItems = document.querySelectorAll('#root li')

    draggables.forEach(draggble => {
        draggble.addEventListener('dragstart', 开始拖动)
    })

    dragListItems.forEach(item => {
        item.addEventListener('dragover', 经过元素)
        item.addEventListener('drop', 放下元素)
        item.addEventListener('dragenter', 进入元素)
        item.addEventListener('dragleave', 离开元素)
    })
}








// 开始拖动
document.addEventListener('dragstart', e => {
    console.log(e,'开始拖动了')
    // 修改被拖动对象的样式
    // e.target.style.background = 'blue'
    // e.target.style.display = 'none'
    e.target.classList.add('drag-white')
})

// 拖动中
document.addEventListener('drag', e => {
    // console.log(e, '拖动中')
})

// 拖动结束
document.addEventListener('dragend', e => {
    console.log(e, '拖动结束了');
    e.target.classList.remove('drag-white')
})